<template>
    <el-container class="login">
        <el-main class="login-content" style="width: 420px;">
            <div class="loginTabs">
                <span @click="tabClick(0)" :class="{active: activeName === 0}">登录</span>
                <span>/</span>
                <span @click="tabClick(1)" :class="{active: activeName === 1}">注册</span>
            </div>
            <!--login-->
            <el-form v-if="activeName === 0" ref="loginForm" :model="loginForm" :rules="rules">
                <el-form-item prop="name">
                    <el-input v-model="loginForm.name" placeholder="请输入账号" prefix-icon="el-icon-mobile-phone"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="loginForm.password" placeholder="请输入密码" prefix-icon="el-icon-edit-outline" type="password"></el-input>
                </el-form-item>
                <el-form-item class="btn">
                    <el-button type="primary" @click="login()">登 录</el-button>
                </el-form-item>
            </el-form>
            <!--register-->
            <el-form v-else ref="registerForm" :model="registerForm" :rules="rules">
                <el-form-item prop="name">
                    <el-input v-model="registerForm.name" placeholder="请输入账号" prefix-icon="el-icon-mobile-phone"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="registerForm.password" placeholder="请输入密码" prefix-icon="el-icon-edit-outline" type="password"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="registerForm.confirmPassword" placeholder="确认密码" prefix-icon="el-icon-edit-outline" type="password"></el-input>
                </el-form-item>
                <el-form-item class="btn">
                    <el-button type="primary" @click="register()">注 册</el-button>
                </el-form-item>
            </el-form>
        </el-main>
    </el-container>
</template>

<script>
    export default {
        name: "login",
        data() {
            return {
                activeName: 0,
                loginForm: {},
                registerForm: {},
                rules: {
                    name: [
                        {required: true, message: '请输入账号', trigger: 'blur'},
                        {min: 3, max: 12, message: '长度在3到12个字符', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 6, max: 16, message: '长度在6到16个字符', trigger: 'blur'}
                    ],
                }
            }
        },
        methods: {
            login () {
                sessionStorage.setItem('token', 'testToken')
                this.$router.push('/')
                /*this.$ajax.getPubkey().then( res => {
                    if (res.publicPem) {
                        let RSA = new this.$jsEncrypt()
                        RSA.setPublicKey(res.publicPem)

                        this.$ajax.login({
                            user_pwd: RSA.encrypt(JSON.stringify(this.loginForm))
                        }).then( res => {
                            if (res.code === 1) {
                                this.$message({
                                    type: 'success',
                                    message: res.message
                                })
                                sessionStorage.setItem('token', res.access_token)
                                this.$router.push('/')
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: res.message
                                })
                            }
                        })
                    }
                })*/
            },
            register () {
                this.$ajax.register(this.registerForm).then( res => {
                    if (res.code === 1) {
                        this.$message({
                            type: 'success',
                            message: res.message
                        })
                        this.activeName = 0
                        this.$refs.registerForm.resetFields()
                    } else {
                        this.$message({
                            type: 'error',
                            message: res.message
                        })
                    }
                })
            },
            validate (form) {
                this.$refs[form].validate( (valid, obj) => {
                    if (!valid) {
                        let msg
                        for (let i in obj) {
                            msg = obj[i][0].message
                            break
                        }

                        this.$message({
                            type: 'error',
                            message: msg,
                        })
                    } else {
                        form == 'loginForm' ? this.login() : this.register()
                    }
                })
            },
            tabClick (type) {
                this.activeName = type
            }
        },
        created: function () {

        },
    }
</script>
